<template>
  <div>
    <div class="myhome-die">
      <div
        style=" background:url('http://www.zhaoshengku.net/wx-mybg.png') no-repeat;background-size: 100% 100%;     background-position:  center center;"
        class="myhome-nav"
      ></div>
      <div class="myhome-nav-my">
        <ul>
          <li>
            <img
              :src="myuser.info_avatar?myuser.info_avatar:'http://www.zhaoshengku.net/wx-tuoyuanone.png'"
              alt
              mode="aspectFill"
            />
          </li>
          <li>{{myuser.info_nick}}</li>
          <li>{{myuser.info_introduce}}</li>
          <li>
            <!-- <div
              style=" background:url('http://www.zhaoshengku.net/wx-yuanjiaojvxingfour.png') no-repeat;background-size: 170rpx 48rpx;     background-position:  center center;"
            >+关注</div>-->
          </li>
        </ul>
      </div>
      <div class="myhome-die_tab">
        <div @click="baomingcenter()" :class="tabValue==0?'div':''">
          <span>报名中心</span>
          <img src="http://www.zhaoshengku.net/wx-xz%282%29.png" alt v-show="tabValue==0" />
        </div>
        <span>|</span>
        <div @click="guanzhulist()" :class="showBlock==1?'sun':''">
          <span>{{guanzhunName}}</span>
          <img src="http://www.zhaoshengku.net/wx-xz%282%29.png" alt v-show="tabValue==1" />
          <div :class="showBlock==1?'sun':''" @click="xuanzeLists">
            <img src="http://www.zhaoshengku.net/wx-xz.png" alt />
          </div>
        </div>
        <div v-show="showBlock==1">
          <div v-for="(item,index) in nameList" :key="index" @click="xuanzeList(index)">{{item}}</div>
        </div>
      </div>
      <div class="myhome-die_tab_list">
        <div class="baomingcenter" v-show="tabValue==0">
          <p class="p" v-if="!listisshow">暂时未有报名记录！</p>
          <div v-for="(item,index) in baomingList" :key="index" v-if="listisshow==true">
            <div>
              <img
                :src="item.info_avatar?item.info_avatar:'http://www.zhaoshengku.net/wx-tuoyuanone.png'"
                alt
              />
              <div>
                <div>{{item.enlist_title}}</div>
                <div>已报名</div>
              </div>
            </div>
            <div>
              <div>
                <img src="http://www.zhaoshengku.net/wx-phonkaobei.png" alt />
                <span v-html="item.info_phone?item.info_phone:zawu"></span>
              </div>
              <div>
                <img src="http://www.zhaoshengku.net/wx-wxkaobei.png" alt />
                <span v-html="item.info_wechat?item.info_wechat:zawu"></span>
              </div>
              <div>
                <img src="http://www.zhaoshengku.net/wx-qqkaobei.png" alt />
                <span v-html="item.info_qq?item.info_qq:zawu"></span>
              </div>
            </div>
          </div>
          <p class="gengduo_div" @click="xiala(0)" v-if="baomingList.length>10">查看更多</p>
        </div>
        <div class="guanzhuList" v-show="tabValue==1">
          <div v-show="showGuanzhu==1">
            <p class="p" v-if="!myguanisshow">暂时没有人关注您！</p>
            <div v-if="myguanisshow">
              <div v-for="(item,index) in userguan" :key="index">
                <div @click="navto(item,0)">
                  <img
                    :src="item.info_avatar?item.info_avatar:'http://www.zhaoshengku.net/wx-tuoyuanone.png'"
                    alt
                  />
                  <span>{{item.info_nick}}</span>
                  <img
                    src="http://www.zhaoshengku.net/wx-%E6%99%AE%E9%80%9A%E5%A4%A7V-V%20%E6%8B%B7%E8%B4%9D.png"
                    alt
                  />
                </div>
                <div @click="quxiao(item.follow_with_member_id,index)">{{guanvalue}}</div>
              </div>
              <p class="gengduo_div" @click="xiala(1)" v-if="userguan.length>10">查看更多</p>
            </div>
          </div>
          <div v-show="showGuanzhu==0">
            <p v-if="!urlisshow" class="p">您暂时没有关注的用户！</p>
            <div v-if="urlisshow">
              <div v-for="(item,index) in  myhuanzhu" :key="index">
                <div @click="navto(item,1)">
                  <img
                    :src="item.info_avatar?item.info_avatar:'http://www.zhaoshengku.net/wx-tuoyuanone.png'"
                    alt
                  />
                  <span>{{item.info_nick}}</span>
                  <img
                    src="http://www.zhaoshengku.net/wx-%E6%99%AE%E9%80%9A%E5%A4%A7V-V%20%E6%8B%B7%E8%B4%9D.png"
                    alt
                  />
                </div>
                <div v-show="item.isall==0" @click="guanzhuTabVal(1)">关注</div>
                <div v-show="item.isall==1">已互关</div>
              </div>
              <p class="gengduo_div" @click="xiala(2)" v-if="myhuanzhu.length>10">查看更多</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabValue: 0,
      showBlock: -1,
      guanzhunName: "关注列表",
      nameList: ["关注我的", "我关注的"],
      showGuanzhu: 0,
      headerCode: "",
      myguanisshow: false,
      urlisshow: false,
      myhuanzhu: [],
      myuser: {},
      guanvalue: "已关注",
      userguan: [],
      baomingList: [],
      zawu: "暂无",
      listisshow: false,
      baomingpagenum: 1,
      myguanpagenum: 1,
      youguanpagenum: 1
    };
  },
  methods: {
    baomingcenter() {
      this.tabValue = 0;
    },
    guanzhulist() {
      if (this.showBlock == -1) {
        this.showBlock = 1;
        return;
      } else if (this.showBlock == 1) {
        return;
      } else {
        this.tabValue = 1;
      }
    },
    xuanzeList(e) {
      this.guanzhunName = this.nameList[e];
      this.showBlock = 0;
      this.tabValue = 1;
      this.showGuanzhu = e;
    },
    xuanzeLists() {
      this.showBlock = 1;
    },
    // 取消关注
    quxiao(id, ind) {
  console.log("11")
      wx.request({
        url: "https://api.zhaoshengku.net/index/member/foolow",
        method: "post",
        header: {
          Authorization: "Bearer " + this.headerCode
        },
        data:{
          id:id
        },
        success: res => {
          console.log(res)
          if (res.data.code == 200) {
            this.myhuanzhu.splice(ind, 1);
          }
        },
        fail: res => {
          console.log(res);
          if (res.errMsg) {
            wx.showToast({
              title: "请检查网络连接！",
              icon: "none",
              duration: 1500
            });
          }
        }
      });
    },
    xiala(e) {
      var _this = this;
      wx.showToast({
        title: "",
        icon: "loading",
        duration: 1000,
        mask: true
      });
      if (e == 0) {
        if (_this.baomingList.length < 10) {
          wx.hideToast();
          wx.showToast({
            title: "暂时没有更多记录！",
            icon: "none",
            duration: 1000,
            mask: true
          });
          return;
        } else {
          _this.baomingpagenum += 1;
          wx.request({
            url: "https://api.zhaoshengku.net/index/member/getmyenlist",
            method: "post",
            data: {
              pagenum: _this.baomingpagenum,
              pagesize: 10
            },
            header: {
              Authorization: "Bearer " + _this.headerCode
            },
            success: res => {
              if (res.data.code == 200) {
                if (res.data.data.data.length == 0) {
                  wx.showToast({
                    title: "暂时没有更多记录！",
                    icon: "none",
                    duration: 1000,
                    mask: true
                  });
                } else {
                  _this.baomingList = _this.baomingList.concat(
                    res.data.data.data
                  );
                  wx.hideToast();
                }
              }
            },
            fail: res => {
              console.log(res);
              if (res.errMsg) {
                wx.showToast({
                  title: "请检查网络连接！",
                  icon: "none",
                  duration: 1500
                });
              }
            }
          });
        }
      } else if (e == 1) {
        if (_this.userguan.length < 10) {
          wx.hideToast();
          wx.showToast({
            title: "暂时没有更多记录！",
            icon: "none",
            duration: 1000,
            mask: true
          });
          return;
        } else {
          _this.myguanpagenum += 1;
          wx.request({
            url: "https://api.zhaoshengku.net/index/member/getfoolowlist",
            method: "post",
            data: {
              pagenum: _this.myguanpagenum,
              pagesize: 10
            },
            header: {
              Authorization: "Bearer " + _this.headerCode
            },
            success: res => {
              if (res.data.code == 200) {
                if (res.data.data.data.length == 0) {
                  wx.showToast({
                    title: "暂时没有更多记录！",
                    icon: "none",
                    duration: 1000,
                    mask: true
                  });
                } else {
                  _this.userguan = _this.userguan.concat(res.data.data.data);
                  wx.hideToast();
                }
              }
            },
            fail: res => {
              console.log(res);
              if (res.errMsg) {
                wx.showToast({
                  title: "请检查网络连接！",
                  icon: "none",
                  duration: 1500
                });
              }
            }
          });
        }
      } else if (e == 2) {
        if (_this.myhuanzhu.length < 10) {
          wx.hideToast();
          wx.showToast({
            title: "暂时没有更多记录！",
            icon: "none",
            duration: 1000,
            mask: true
          });
          return;
        } else {
          wx.request({
            url: "https://api.zhaoshengku.net/index/member/getwithfoolowlist",
            method: "post",
            data: {
              pagenum: _this.youguanpagenum,
              pagesize: 10
            },
            header: {
              Authorization: "Bearer " + _this.headerCode
            },
            success: res => {
              if (res.data.code == 200) {
                if (res.data.data.data == 0) {
                  wx.showToast({
                    title: "暂时没有更多记录！",
                    icon: "none",
                    duration: 1000,
                    mask: true
                  });
                } else {
                  _this.myhuanzhu = _this.myhuanzhu.concat(res.data.data.data);
                  wx.hideToast();
                }
              }
            },
            fail: res => {
              console.log(res);
              if (res.errMsg) {
                wx.showToast({
                  title: "请检查网络连接！",
                  icon: "none",
                  duration: 1500
                });
              }
            }
          });
        }
      }
    },
    onShows() {
      // 获取自己的信息
      this.myuser = this.$store.state.myxinxi;
      wx.showToast({
        title: "",
        icon: "loading"
      });
      //  获取验证token
      var _this = this;
      wx.getStorage({
        key: "koken",
        success: res => {
          _this.headerCode = res.data;
          wx.request({
            url: "https://api.zhaoshengku.net/index/login/verifytoken",
            method: "post",
            data: {},
            header: {
              Authorization: "Bearer " + _this.headerCode
            },
            success: res => {
              if ((res.data.code != 200) & (res.data.code != 40003)) {
                wx.showToast({
                  title: "未登录！",
                  icon: "none",
                  duration: 2500
                });
                setTimeout(function() {
                  wx.navigateTo({
                    url: "/pages/loginRegister/main"
                  });
                }, 1000);
              } else {
                // 获取关注列表
                wx.request({
                  url: "https://api.zhaoshengku.net/index/member/getfoolowlist",
                  method: "post",
                  data: {
                    pagenum: _this.myguanpagenum,
                    pagesize: 10
                  },
                  header: {
                    Authorization: "Bearer " + _this.headerCode
                  },
                  success: res => {
                    if (res.data.code == 200) {
                      if (res.data.data.data.length == 0) {
                        _this.myguanisshow = false;
                      } else {
                        _this.myguanisshow = true;
                        _this.userguan = res.data.data.data;
                      }
                    }
                  },
                  fail: res => {
                    console.log(res);
                    if (res.errMsg) {
                      wx.showToast({
                        title: "请检查网络连接！",
                        icon: "none",
                        duration: 1500
                      });
                    }
                  }
                });

                // 获取被关注列表
                wx.request({
                  url:
                    "https://api.zhaoshengku.net/index/member/getwithfoolowlist",
                  method: "post",
                  data: {
                    pagenum: _this.youguanpagenum,
                    pagesize: 10
                  },
                  header: {
                    Authorization: "Bearer " + _this.headerCode
                  },
                  success: res => {
                    if (res.data.code == 200) {
                      wx.stopPullDownRefresh();
                      if (res.data.data.data == 0) {
                        _this.urlisshow = false;
                      } else {
                        _this.urlisshow = true;
                        _this.myhuanzhu = res.data.data.data;
                      }
                    }
                  },
                  fail: res => {
                    console.log(res);
                    if (res.errMsg) {
                      wx.showToast({
                        title: "请检查网络连接！",
                        icon: "none",
                        duration: 1500
                      });
                    }
                  }
                });
                // 获取自己报名的列表
                wx.request({
                  url: "https://api.zhaoshengku.net/index/member/getmyenlist",
                  method: "post",
                  data: {
                    pagenum: this.baomingpagenum,
                    pagesize: 10
                  },
                  header: {
                    Authorization: "Bearer " + _this.headerCode
                  },
                  success: res => {
                    console.log(res)
                    if (res.data.code == 200) {
                      if (res.data.data.data.length == 0) {
                        this.listisshow = false;
                      } else {
                        this.listisshow = true;
                        this.baomingList = res.data.data.data;
                        console.log(this.baomingList)
                      }
                    }
                  },
                  fail: res => {
                    console.log(res);
                    if (res.errMsg) {
                      wx.showToast({
                        title: "请检查网络连接！",
                        icon: "none",
                        duration: 1500
                      });
                    }
                  }
                });
              }
              wx.hideToast();
            },
            fail: res => {
              console.log(res);
              if (res.errMsg) {
                wx.showToast({
                  title: "请检查网络连接！",
                  icon: "none",
                  duration: 1500
                });
              }
            }
          });
        }
      });
    },
    navto(e, i) {
      var _this = this;
      let id;
      var url;
      if (e.info_type == 4) {
        url = "myhomeEducat";
      } else if (e.info_type == 5) {
        url = "myhome";
      } else if (e.info_type == 6) {
        return;
      }
      if (i == 1) {
        id = e.follow_member_id;
      } else if (i == 0) {
        id = e.follow_with_member_id;
      }
      if (id) {
        wx.request({
          url: "https://api.zhaoshengku.net/api/data/getinfo",
          header: {
            Authorization: "Bearer " + _this.headerCode
          },
          method: "post",
          data: {
            id: id
          },
          success: res => {
            if (res.data.code == 200) {
              wx.navigateTo({
                url:
                  "/pages/" +
                  url +
                  "/main?id=" +
                  id +
                  "&expor=0&name=" +
                  res.data.data.info_subdomain
              });
              console.log(res.data.data.info_subdomain);
            }
          }
        });
      }
    }
  },
  mounted() {
    this.showBlock = -1;
    this.guanzhunName = "关注列表";
    this.tabValue = 0;
    // 设置头
    wx.setNavigationBarTitle({
      title: "个人主页"
    });
  },
  onShow() {
    this.onShows();
  },
  onPullDownRefresh() {
    this.onShows();
  }
};
</script>

<style scoped>
/* 关注列表 */

.p {
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  color: #666;
  text-align: center;
  background: #fff;
}
.guanzhuList > div {
  padding: 0 10rpx;
}
.guanzhuList > div > div > div {
  width: 100%;
  height: 137rpx;
  padding-left: 21rpx;
  padding-right: 31rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  box-shadow: 0px 0px 8px 0px rgba(102, 102, 102, 0.35);
  border-radius: 10px;
  background: #fff;
  position: relative;
  margin-bottom: 10rpx;
}
.guanzhuList > div > div > div > div:nth-child(1) {
  display: flex;
  align-items: center;
}
.guanzhuList > div > div > div > div:nth-child(1) > img:nth-child(1) {
  width: 102rpx;
  height: 102rpx;
  border-radius: 50%;
  margin-right: 35rpx;
}
.guanzhuList > div > div > div > div:nth-child(1) > span:nth-child(2) {
  font-size: 28rpx;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
}
.guanzhuList > div > div > div > div:nth-child(1) > img:nth-child(3) {
  width: 30rpx;
  height: 30rpx;
  position: absolute;
  left: 88rpx;
  top: 88rpx;
}
.guanzhuList > div > div > div > div:nth-child(2) {
  border: 1rpx solid rgba(153, 153, 153, 1);
  border-radius: 24px;
  width: 140rpx;
  height: 48rpx;
  line-height: 40rpx;
  background: url("http://www.zhaoshengku.net/wx-%E5%AF%B9%E5%8F%B7.png")
    no-repeat;
  background-size: 26rpx 18rpx;
  font-size: 24rpx;
  background-position: 15rpx 12rpx;
  font-weight: bold;
  color: rgba(153, 153, 153, 1);
  padding-left: 48rpx;
  box-sizing: border-box;
}
.guanzhuList > div:nth-child(2) > div > div > div:nth-child(2) {
  background: url("https://www.zhaoshengku.net/wx-jia.png") no-repeat;
  background-size: 19rpx 19rpx;
  background-position: 28rpx 12rpx;
  padding-left: 58rpx;
}
.guanzhuList > div:nth-child(2) > div > div > div:nth-child(3) {
  font-size: 24rpx;
  font-weight: bold;
  color: rgba(153, 153, 153, 1);
  width: 140rpx;
  height: 48rpx;
  padding-left: 48rpx;
  box-sizing: border-box;
  background: url("http://www.zhaoshengku.net/wx-%E4%BA%92%E7%9B%B8%E5%85%B3%E6%B3%A8.png")
    no-repeat;
  background-size: 27rpx 32rpx;
  background-position: 15rpx 8rpx;
  line-height: 48rpx;
}
/* 关注列表结束 */
/* 报名列表开始 */
.myhome-die_tab_list {
  width: 100%;
  background: #dddddd;
  padding: 30rpx;
  box-sizing: border-box;
}
.baomingcenter > div {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 22rpx 0px rgba(0, 13, 28, 0.3);
  border-radius: 6rpx;
  padding: 30rpx 30rpx 15rpx 30rpx;
  box-sizing: border-box;
  margin-top: 30rpx;
}
.baomingcenter > div > div:nth-child(1) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}
.baomingcenter > div > div:nth-child(1) > img {
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
  margin-right: 60rpx;
}
.baomingcenter > div > div:nth-child(1) > div {
  flex: 1;
  font-size: 26rpx;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  line-height: 50rpx;
  border-bottom: 1rpx solid #e5e5e5;
  padding-bottom: 15rpx;
  box-sizing: border-box;
}
.baomingcenter > div > div:nth-child(1) > div > div:nth-child(2) {
  font-size: 26rpx;
  font-weight: 400;
  color: rgba(34, 151, 212, 1);
  box-sizing: border-box;
}
.baomingcenter > div > div:nth-child(2) {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}
.baomingcenter > div > div:nth-child(2) div {
  display: flex;
  align-items: center;
}
.baomingcenter > div > div:nth-child(2) > div > img {
  width: 24rpx;
  height: 24rpx;
  margin-right: 21rpx;
}
.baomingcenter > div > div:nth-child(2) > div > span {
  font-size: 22rpx;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  line-height: 37rpx;
}
/* 报名列表结束 */
/* tab切换模块开始 */
.bg {
  width: 100%;
  height: 10rpx;
  background: #dddddd;
}
.myhome-die_tab {
  background: rgba(255, 255, 255, 1);
  width: 100%;
  padding: 0 30rpx;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  align-items: center;
  position: relative;
}
.myhome-die_tab > div {
  width: 49.8%;
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  font-size: 28rpx;
  font-weight: bold;
  color: rgba(102, 102, 102, 1);
  position: relative;
}
.myhome-die_tab > div > img {
  width: 100%;
  height: 2rpx;
  position: absolute;
  left: 0;
  bottom: 0;
}
.myhome-die_tab > span {
  color: rgba(102, 102, 102, 1);
}
.myhome-die_tab > div:nth-child(3) > div > img {
  width: 12rpx;
  height: 22rpx;
}
.myhome-die_tab > div:nth-child(3) > .sun {
  transform: rotate(90deg);
}
.myhome-die_tab > div:nth-child(3) > div {
  width: 25rpx;
  position: absolute;
  left: 237rpx;
  top: 0rpx;
}
.myhome-die_tab > .div {
  color: rgba(34, 151, 212, 1);
}
.myhome-die_tab > div:last-child {
  width: 270rpx;
  height: 201rpx;
  box-sizing: border-box;
  padding: 0 20rpx;
  position: absolute;
  left: 351rpx;
  bottom: -179rpx;
  background: #fff;
  z-index: 111;
  box-shadow: 0px 0px 13rpx 0px rgba(0, 0, 0, 0.35);
  border-radius: 10rpx;
}
.myhome-die_tab > div:last-child > div {
  font-size: 28rpx;
  font-weight: bold;
  color: rgba(102, 102, 102, 1);
  height: 100rpx;
  line-height: 100rpx;
}
.myhome-die_tab > div:last-child > div:nth-child(1) {
  border-bottom: 1rpx solid #dcdcdc;
}
/* tab切换模块结束 */
/* 顶部开始 */
.myhome-nav {
  width: 100%;
  height: 385rpx;
  box-sizing: border-box;
  padding-top: 60rpx;
}
.myhome-nav > ul > li:nth-child(1) > img {
  width: 18rpx;
  height: 34rpx;
}
.myhome-nav > ul > li:nth-child(2) > img {
  width: 34rpx;
  height: 31rpx;
}
.myhome-nav > ul {
  display: flex;
  justify-content: space-between;
  margin: 0 30rpx;
  box-sizing: border-box;
}
/* 顶部结束 */
/* 根设置 */
.myhome-die {
  background: #eee;
}
/* 根设置结束 */
/* 个人信息模块 */
.myhome-nav-my > ul:nth-child(1) > li:nth-child(1) {
  margin: 0;
  position: relative;
}
.myhome-nav-my > ul:nth-child(1) > li:nth-child(1) img {
  width: 204rpx;
  height: 204rpx;
  position: absolute;
  left: 275rpx;
  top: -242rpx;
  border-radius: 50%;
}
.myhome-nav-my > ul:nth-child(1) > li:nth-child(2) {
  font-size: 36rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(0, 0, 0, 1);
  margin-top: 0;
}

.myhome-nav-my > ul:nth-child(1) > li:nth-child(3) {
  font-size: 24rpx;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  padding: 0 30rpx;
}
.myhome-nav-my > ul:nth-child(1) > li:nth-child(4) > div {
  width: 200rpx;
  height: 78rpx;
  font-size: 22rpx;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  display: inline-block;
  line-height: 78rpx;
}
.myhome-nav-my > ul:nth-child(1) > li {
  text-align: center;
  margin-top: 20rpx;
}
.myhome-nav-my > ul:nth-child(1) > li:nth-child(4) {
  margin-top: 50rpx;
}
.myhome-nav-my {
  background: #fff;
  margin-bottom: 10rpx;
}
.myhome-nav-my > ul:nth-child(1) {
  padding-top: 140rpx;
}
.gengduo_div {
  width: 100%;
  text-align: center;
  color: #666;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 26rpx;
  padding: 0;
  background: #fff;
  margin-top: 20rpx;
}
/* 个人信息模块结束 */
</style>
